<template>
  <basic-container>
    <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick" class="tab-font">
      <el-tab-pane label="仓库配置" name="warehouse"> </el-tab-pane>
      <el-tab-pane label="区域配置" name="area"> </el-tab-pane>
      <el-tab-pane label="储位配置" name="storage"></el-tab-pane>
      <ware-house-curd v-if="activeName === 'warehouse'"> </ware-house-curd>
      <area-crud v-if="activeName === 'area'"></area-crud>
      <storage-curd v-if="activeName === 'storage'"></storage-curd>
    </el-tabs>
  </basic-container>
</template>
<script>
import { mapGetters } from 'vuex';
import userTableConfig from '@/components/user-table-config/index.vue';
import userConfig from '@/mixins/userConfig';
import CommonModalTemplate from '@/components/common-modal-template/common-modal-template.vue';
import viewDialog from '@/views/warehouse/components/viewDialog';
import WareHouseCurd from '@/views/warehouse/components/wareHouseCurd.vue';
import AreaCrud from '@/views/warehouse/components/areaCrud.vue';
import StorageCurd from '@/views/warehouse/components/storageCurd.vue';
export default {
  components: {
    StorageCurd,
    AreaCrud,
    WareHouseCurd,
    userTableConfig,
    CommonModalTemplate,
    viewDialog
  },
  mounted() {},
  data() {
    return {
      activeName: 'storage'
    };
  },
  computed: {
    ...mapGetters(['permission']),
    permissionList() {
      return {
        addBtn: this.vaildData(this.permission, false),
        viewBtn: this.vaildData(this.permission, false),
        delBtn: this.vaildData(this.permission, false),
        editBtn: this.vaildData(this.permission, false)
      };
    }
  },
  methods: {}
};
</script>
<style lang="scss" scoped>
.tab-font {
  ::v-deep .el-tabs__item {
    color: #606266 !important;
    font-weight: bold;
  }
}
</style>
